<template>
    <view class="container">
      <view class="title">注册账号</view>
      
      <view class="form-container">
        <view class="form-group">
          <view class="form-label">用户名</view>
          <input 
            class="input" 
            type="text" 
            v-model="form.username" 
            placeholder="请输入用户名" 
          />
        </view>
        
        <view class="form-group">
          <view class="form-label">手机号</view>
          <input 
            class="input" 
            type="number" 
            v-model="form.phone" 
            placeholder="请输入手机号" 
            maxlength="11"
          />
        </view>
        
        <view class="form-group">
          <view class="form-label">密码</view>
          <input 
            class="input" 
            :type="showPassword ? 'text' : 'password'" 
            v-model="form.password" 
            placeholder="请输入密码" 
          />
          <text 
            class="password-toggle" 
            @click="showPassword = !showPassword"
          >
            {{ showPassword ? '隐藏' : '显示' }}
          </text>
        </view>
        
        <view class="form-group">
          <view class="form-label">确认密码</view>
          <input 
            class="input" 
            :type="showConfirmPassword ? 'text' : 'password'" 
            v-model="form.confirmPassword" 
            placeholder="请再次输入密码" 
          />
          <text 
            class="password-toggle" 
            @click="showConfirmPassword = !showConfirmPassword"
          >
            {{ showConfirmPassword ? '隐藏' : '显示' }}
          </text>
        </view>
        
        <view class="form-group verification">
          <view class="form-label">验证码</view>
          <input 
            class="input verification-input" 
            type="number" 
            v-model="form.verificationCode" 
            placeholder="请输入验证码" 
            maxlength="6"
          />
          <button 
            class="btn-verify" 
            :disabled="countDown > 0" 
            @click="sendVerificationCode"
          >
            {{ countDown > 0 ? `${countDown}s` : '获取验证码' }}
          </button>
        </view>
        
        <view class="agreement">
          <checkbox 
            :checked="agreeProtocol" 
            @click="agreeProtocol = !agreeProtocol"
          ></checkbox>
          <text class="agreement-text">
            我已阅读并同意
            <text class="link" @click="showProtocol">《用户协议》</text>
            和
            <text class="link" @click="showPrivacy">《隐私政策》</text>
          </text>
        </view>
        
        <view class="form-group">
          <button 
            class="btn-register" 
            :loading="loading" 
            :disabled="loading || !agreeProtocol" 
            @click="handleRegister"
          >
            注册
          </button>
        </view>
        
        <view class="login-tip">
          已有账号？
          <text class="link" @click="navigateTo('/pages/login/login')">立即登录</text>
        </view>
      </view>
    </view>
  </template>
  
  <script>
  import { mapActions } from 'vuex';
  import { isPhone, isEmpty, isPassword } from '@/utils/validator';
  
  export default {
    data() {
      return {
        form: {
          username: '',
          phone: '',
          password: '',
          confirmPassword: '',
          verificationCode: ''
        },
        showPassword: false,
        showConfirmPassword: false,
        countDown: 0,
        agreeProtocol: false,
        loading: false,
        timer: null
      };
    },
    onUnload() {
      // 页面卸载时清除计时器
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    methods: {
      ...mapActions('user', [
        'register'
      ]),
      navigateTo(url) {
        uni.navigateTo({
          url
        });
      },
      showProtocol() {
        uni.navigateTo({
          url: '/pages/common/protocol'
        });
      },
      showPrivacy() {
        uni.navigateTo({
          url: '/pages/common/privacy'
        });
      },
      sendVerificationCode() {
        // 验证手机号
        if (!isPhone(this.form.phone)) {
          this.showToast('请输入正确的手机号');
          return;
        }
        
        // 请求发送验证码
        // 这里是简化的示例，实际应该调用接口
        this.showToast('验证码发送成功');
        
        // 开始倒计时
        this.countDown = 60;
        this.timer = setInterval(() => {
          this.countDown--;
          if (this.countDown <= 0) {
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      },
      handleRegister() {
        // 表单验证
        if (isEmpty(this.form.username)) {
          this.showToast('请输入用户名');
          return;
        }
        
        if (!isPhone(this.form.phone)) {
          this.showToast('请输入正确的手机号');
          return;
        }
        
        if (isEmpty(this.form.password)) {
          this.showToast('请输入密码');
          return;
        }
        
        if (this.form.password.length < 6) {
          this.showToast('密码长度不能少于6位');
          return;
        }
        
        if (this.form.password !== this.form.confirmPassword) {
          this.showToast('两次输入的密码不一致');
          return;
        }
        
        if (isEmpty(this.form.verificationCode)) {
          this.showToast('请输入验证码');
          return;
        }
        
        if (!this.agreeProtocol) {
          this.showToast('请同意用户协议和隐私政策');
          return;
        }
        
        this.loading = true;
        
        // 注册
        const registerData = {
          username: this.form.username,
          phone: this.form.phone,
          password: this.form.password,
          verification_code: this.form.verificationCode
        };
        
        this.register(registerData)
          .then(() => {
            this.showToast('注册成功', 'success');
            // 延迟跳转，让用户看到提示
            setTimeout(() => {
              uni.navigateTo({
                url: '/pages/login/login'
              });
            }, 1500);
          })
          .catch(err => {
            this.showToast(err.message || '注册失败');
          })
          .finally(() => {
            this.loading = false;
          });
      }
    }
  };
  </script>
  
  <style lang="scss">
  .container {
    padding: 40rpx;
  }
  
  .title {
    font-size: 40rpx;
    font-weight: bold;
    margin-bottom: 40rpx;
    text-align: center;
  }
  
  .form-container {
    padding: 20rpx 0;
  }
  
  .form-group {
    position: relative;
    margin-bottom: 30rpx;
  }
  
  .form-label {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 10rpx;
  }
  
  .input {
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    padding: 0 30rpx;
    font-size: 32rpx;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 10rpx;
    box-sizing: border-box;
  }
  
  .password-toggle {
    position: absolute;
    right: 30rpx;
    top: 65rpx;
    font-size: 28rpx;
    color: #999;
  }
  
  .verification {
    display: flex;
    flex-direction: column;
  }
  
  .verification-input {
    flex: 1;
    margin-right: 20rpx;
  }
  
  .btn-verify {
    position: absolute;
    right: 10rpx;
    top: 55rpx;
    width: 200rpx;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 28rpx;
    color: #3c8dbc;
    background-color: transparent;
    border: 1px solid #3c8dbc;
    border-radius: 8rpx;
  }
  
  .agreement {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.agreement-text {
  font-size: 26rpx;
  color: #666;
  margin-left: 10rpx;
}

.link {
  color: #3c8dbc;
}

.btn-register {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  font-size: 32rpx;
  color: #fff;
  background-color: #3c8dbc;
  border-radius: 10rpx;
  margin-top: 20rpx;
}

.login-tip {
  font-size: 28rpx;
  color: #666;
  text-align: center;
  margin-top: 30rpx;
}
</style>